<!--
 * @Description: 
 * @version: 
 * @Author: wind.wang
 * @Date: 2024-02-03 18:00:01
 * @LastEditors: wind.wang
 * @LastEditTime: 2024-02-03 23:39:35
-->
<template>
  <div class="slide-bar-container">
    <div class="slide-content">
      <div v-for="item in slideBarArr" :key="item.id" class="bar-list">
         <p :class="{ 'opened': item.isActive }" @click.stop="toggleBar(item)">{{ item.title }}</p>
         <div v-if="item.isActive" class="bar-children">
          <ul v-for="child in item.children" :key="child.id" class="bar-children-ul">
              <li :class="{ 'active': child.isActive }" @click="goToPage(child, item)">{{ child.title }}</li>
           </ul>
         </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"  name="SlideBar">

  import { reactive, watch, onMounted } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  interface MenuItemMode {
    title: string,
    id: string,
    isActive: boolean,
    url: string
  }

  interface MenuListMode {
    title: string,
    id: string,
    isActive: boolean,
    children: MenuItemMode[]
  }
// 侧边栏列表
const slideBarArr = reactive<MenuListMode[]>([
  {
    title:'学生信息管理',
    id: '1',
    isActive: false,
    children: [
      {
        title: '学生列表',
        id: '1-1',
        isActive: false,
        url: '/student'
      }
    ]
  },
  {
    title: '班级信息管理',
    id: '2',
    isActive: false,
    children: []
  },
  {
    title: '教师信息管理',
    id: '3',
    isActive: false,
    children: []
  },
  {
    title: '课程信息管理',
    id: '4',
    isActive: false,
    children: []
  },
  {
    title: '考勤信息管理',
    id: '5',
    isActive: false,
    children: []
  }
])

watch(() => router.currentRoute.value, (newVal) => {
  slideBarArr.forEach((arr: MenuListMode) => {
    arr.isActive = false;
    let flag = false;
    arr?.children.forEach((item: MenuItemMode) => {
      item.isActive = false;
      if (item.url === newVal.path) {
        item.isActive = true;
        flag = true;
      }
    })
    if (flag) {
      arr.isActive = true;
    }
  })
})

// 展开和收起
const toggleBar = (item: MenuListMode) => {
  slideBarArr.forEach(item => {
    item.isActive = false
  });
  const current: MenuListMode = slideBarArr.find(arr => arr.id === item.id) as MenuListMode;
  current.isActive = !current?.isActive;
}

// 跳转对应的模块
const goToPage = (child: MenuItemMode, item: MenuListMode) => {
  slideBarArr.forEach(arr => {
    arr.children.forEach(cur => {
      cur.isActive = false;
      if (cur.id === child.id) {
        cur.isActive = true;
        router.push(cur.url);
      }
    })
  })
}

onMounted(() => {
  const route: any = router.currentRoute;
  slideBarArr.forEach((arr: MenuListMode) => {
    arr.isActive = false;
    let flag = false;
    arr?.children.forEach((item: MenuItemMode) => {
      item.isActive = false;
      if(item.url === route.value.path) {
        item.isActive = true;
        flag = true;
      }
    })
    if(flag) {
      arr.isActive = true;
    }
  })
})
</script>

<style lang="scss" scoped>
.slide-bar-container {
  width: 100%;
  height: 100%;
  background: #79ccea;
  .slide-content {
    width: 100%;
    .bar-list {
      width: 100%;
      border-bottom: 1px solid #fff;
      p {
        width: 100%;
        height: 40px;
        text-align: left;
        font-size: 16px;
        color: #666;
        line-height: 40px;
        padding-left: 20px;
        box-sizing: border-box;
        cursor: pointer;
        &.opened {
          background: #0c89b7;
          color: #fff;
        }
        &:hover {
          background: rgba(0, 0, 0 , .6);
          color: #fff;
        }
      }
      .bar-children {
        width: 100%;
      }
      .bar-children-ul {
        width: 100%;
        padding: 0;
        li {
          width: 100%;
          height: 32px;
          text-align: left;
          line-height: 32px;
          font-size: 14px;
          color: #666;
          cursor: pointer;
          padding-left: 40px;
           &:hover {
            background: rgba(0, 0, 0, .6);
            color: #fff;
          }
          &.active {
            color: #fff;
          }
        }
      }
    } 
  }
}
</style>